Gather.Townからオンラインホワイトボードサービス「Miro」連携を行う

Gather.Townでは、オブジェクトに設定可能な「埋め込みURL」を活用することで、Gather.Town経由で様々なサービス連携を行うことが出来ます。

当エントリでは、オンラインホワイトボードサービスの「Miro」をGather.Town上から連携して利用する方法について紹介したいと思います。

目次

• 参考情報
• Gather.Town＆Miro連携実践
• まとめ

　

参考情報

Miro側で紹介されている「埋め込みオブジェクトの設定」に関する情報は以下となります。無料版でも手順に従うことで利用が可能となっているようです。

• Does Mira embed well in Gather.town? | Miro

実際の利用手順紹介ページは以下。

• Embedding Editable Boards into Websites – Miro Support & Help Center

　

Gather.Town＆Miro連携実践

ここからは実際にMiroで作成したダッシュボードをGather.Townで連携する方法について見ていきます。まずは任意のMiroダッシュボードを用意。

ダッシュボード画面 タイトル横にあるアイコンから[Embed]を選択。

初期設定ではダッシュボードの表示設定はプライベートモードになっています。一般公開したい場合は別途[share settings]から変更を行う必要があります。今回はプライベートモードのまま、変更は行いません(アクセス権限があるユーザーのみ参照・編集可能)が、設定項目を見てみます。[share settings]のリンクをクリック。

以下のような設定項目で、細かい設定を行うことが可能になっています。全体公開は[No access]となっていることが確認出来ます。

この部分は以下のような選択肢が用意されています。

手順を戻します。埋め込みURLは下記の部分からコピペが可能です。まずはiframeタグを含めた文字列を全選択。(全選択の時点でクリップボードにコピーされます)

コピーしたiframeタグの中から、srcタグの属性値部分をURLとして切り出し、Gather.Townの埋め込みオブジェクト設定を行います。

任意の場所にオブジェクトを配置し、アクセスを試してみます。オブジェクトに近付いて[x]ボタンを押下。

以下のような画面が表示されるので、[See the board]をクリック。

無事、Miroダッシュボードにアクセス出来ました！

基本的な設定は上記の通りですが、設定はカスタマイズが可能です。[Embed board]設定で[Set start area]を押下し、

任意の範囲選択を行い[Done]を押下。

この操作で「Miroダッシュボードのアクセス時に初期表示を行う範囲を指定」することが可能となります。

Miroのダッシュボードでは複数の「フレーム(frame)」を含めることが可能となっており、Miroダッシュボードのアクセス時に「どのフレームを表示させるか」という指定も可能です。メニューからフレーム追加の操作を行い、

フレームに任意のコンテンツを配置・作成しておきます。

[Embed board]設定の[Presentation]タブでフレームを指定しておくことで生成されるiframeタグ情報を活用することで、Gather.Townから連携するMiroダッシュボードの表示切り替えも可能となります。

　

まとめ

という訳で、Gather.TownからMiroのダッシュボードを連携する際の手順の紹介でした。

Miroは最近個人的にも良く使っているツールで、メンバーと議論しながらダッシュボードを編集する機会も増えているので、このような形でシームレスにコンテンツ連携が行えるのは便利で嬉しいですね。

• Gather.Town の記事一覧 | DevelopersIO